<template>
  <div class="about">
    <h1>发布作业</h1>
    <input type="text" name="" id="" v-model="title" />

    <v-md-editor
      v-model="text"
      height="400px"
      :disabled-menus="[]"
      @upload-image="handleUploadImage"
    ></v-md-editor>

    <button @click="pubFn">发布</button>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import http, { baseURL } from '@/utils/http'
import router from '@/router'

const text = ref('')
const title = ref('')
const userid = localStorage.getItem('homework-userid')
const username = localStorage.getItem('homework-usename')

function pubFn() {
  http({
    url: '/api/homework/pub',
    method: 'post',
    data: {
      workTitle: title.value,
      workDesc: text.value,
      userid: userid,
      username: username,
    },
  }).then((r) => {
    console.log(r.data)
    alert(r.data.message)
    router.push('/')
  })
}

function handleUploadImage(event, insertImage, files) {
  // 拿到 files 之后上传到文件服务器，然后向编辑框中插入对应的内容
  console.log(files)

  http({
    url: '/api/file/upload',
    method: 'post',
    data: { img: files[0] },
    headers: {
      'Content-Type': 'multipart/form-data',
    },
  }).then((r) => {
    console.log(r.data)
    r.data.fileUrl
    insertImage({
      url: baseURL + r.data.fileUrl,
      desc: files[0].name,
      // width: 'auto',
      // height: 'auto',
    })
  })

  // 此处只做示例
  // insertImage({
  //   url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1269952892,3525182336&fm=26&gp=0.jpg',
  //   desc: '七龙珠',
  //   // width: 'auto',
  //   // height: 'auto',
  // })
}
</script>

<style></style>
